<template>
 
   <el-form :inline="true" :model="from" class="demo-form-inline">
   <el-form-item label="合同标题">
     <el-input v-model="from.contractTitle" placeholder="请输入合同标题" clearable />
   </el-form-item>
   <el-form-item label="对方单位">
     <el-input v-model="from.unit" placeholder="对方单位" clearable />
   </el-form-item>
   <el-form-item label="对方负责人">
     <el-input v-model="from.personCharge" placeholder="对方负责人" clearable />
   </el-form-item>
   <el-form-item label="经办人">
     <el-input v-model="from.attn" placeholder="经办人" clearable />
   </el-form-item>
   <el-form-item label="签订日期">
       <el-date-picker
       v-model="from.dateofSigning"
       type="date"    value-format="YYYY-MM-DD"
       placeholder="签订日期"
       clearable
     />
   </el-form-item>

   <el-button size="small" type="primary" @click="show" >查询</el-button>
  <el-button size="small" type="primary" @click="chong()"  >重置</el-button>
  <div>
    <el-radio-group v-model="radio" size="large">
      <el-radio-button label="全部" @click="show1()" />
      <el-radio-button label="待审批" @click="show2()"  />
      <el-radio-button label="已审批" @click="show3()"  />
    </el-radio-group>
  </div>
   </el-form>
   <el-table :data="tableData" style="width: 100%" >
       
   <el-table-column prop="contractNumber" label="合同编号" width="100" />
   <el-table-column prop="contractTitle" label="合同标题" width="100" />
   <el-table-column prop="unit" label="对方单位" width="100" />
   <el-table-column prop="personCharge" label="对方负责人" width="100" />
   <el-table-column prop="contractType" label="合同类别" width="100" />
<el-table-column prop="dateofSigning" label="签订日期" width="100" >
  <template #default="scope">
           {{ scope.row.dateofSigning.substring(0, 10)}}
  </template>
</el-table-column>
   <el-table-column prop="attn" label="经办人" width="100" />
   <el-table-column prop="createdDate" label="创建时间" width="100" >
     <template #default="scope">
       {{ scope.row.createdDate.substring(0, 10)}}
     </template>
   </el-table-column>
   <el-table-column prop="ccontractStatus" label="状态" width="100" >
       <template #default="scope">
         <el-tag type="success" v-if="scope.row.ccontractStatus == 2">待审批</el-tag>
           <el-tag type="success" v-if="scope.row.ccontractStatus == 3">已通过</el-tag>
           <el-tag type="success" v-if="scope.row.ccontractStatus == 4">已拒绝</el-tag>
         
       </template>
</el-table-column>
   <el-table-column prop="approver" label="审批人" width="100" />
   <el-table-column  label="操作" width="500" >
   <template #default="scope">
      <el-button size="small" type="primary" @click="look(scope.row.contractId)" >查看</el-button>
  
      <el-button size="small" type="primary"    @click="yes(scope.row.contractId)"  :disabled="scope.row.ccontractStatus == 3 || scope.row.ccontractStatus == 4" >通过</el-button>
      <el-button size="small" type="danger"  @click="no(scope.row.contractId)"  :disabled="scope.row.ccontractStatus == 3 || scope.row.ccontractStatus == 4" >拒绝</el-button>
 </template>
     </el-table-column>
</el-table>
 <el-pagination
     v-model:current-page="page.Pageindex"
     v-model:page-size="page.Pagesize"
     :page-sizes="[3, 6, 9, 11]"
      layout="total, sizes, prev, pager, next, jumper"
     :total="page.totalCount"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
   />


</template>
  <script setup lang='ts'>
   import axios  from 'axios';

import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
   import { ref, reactive, onMounted,watch } from 'vue'; 
   const tableData = ref([]);  
   const radio = ref()
   const dialogVisible = ref(false) 
   onMounted(() => {
      show()
       })
    //查询条件
   const from=reactive({
           contractTitle:'',
           unit:'',
           personCharge:'',
           attn:'',
           dateofSigning:'',
           ccontractStatus:'',
           ContractClassification:3
})

const chong=()=>{
 from.contractTitle='',
 from.unit='',
 from.personCharge='',
 from.attn='',
 from.dateofSigning='',
 from.ccontractStatus=''
}
const yes=(contractId:number)=>{
  let hh={
    approvalResult:"同意",
    approvalNotes:'',
    approver:localStorage.getItem('username'),
    contractId:contractId,
    subgrantor:'',
}
 axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已通过',
          type: 'success',
        })
         show()
       }else{
         ElMessage.error('修改失败')
        }
    })
}
//拒绝
const no=(contractId:number)=>{
 
  let hh={
    approvalResult:"拒绝",
    approvalNotes:'',
    approver:localStorage.getItem('username'),
    contractId:contractId,
    subgrantor:'',
}
 axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已拒绝',
          type: 'success',
        })
         show()
       }else{
         ElMessage.error('修改失败')
        }
    })
}
const page=reactive({
   Pageindex:1,
   Pagesize:2,
   totalCount:0,
   PageCount:0

  })
const show=()=>{
  axios.get('/hread/api/ContractRead/Show',
           {
               params: {
                   Pageindex:page.Pageindex,
                   Pagesize:page.Pagesize,
                   ContractTitle:from.contractTitle,
                   Unit:from.unit,
                   PersonCharge:from.personCharge,
                   Attn:from.attn,
                   DateofSigning:from.dateofSigning,
                   CcontractStatus:from.ccontractStatus,
                   ContractClassification:from.ContractClassification
  } 
      }
       )
       .then(res => {
    tableData.value = res.data.data.list;
    console.log(res.data.data.list)
     page.totalCount=res.data.data.totalCount;
        page.PageCount=res.data.data.pageCount;
       
         
       })

}
const show1=()=>{
 from.ccontractStatus="",
  show()
     
}
const show2=()=>{
 from.ccontractStatus="2",
 console.log(from.ccontractStatus)
  show()

     
}
const show3=()=>{
  from.ccontractStatus="3",
  show()
}
import { useRouter } from 'vue-router';
const router=useRouter()

//分页
const handleSizeChange = (val:any) => {
   page.Pagesize=val;
   show();
 }
 const handleCurrentChange = (val:any) => {
   page.Pageindex=val;
   show();
 } 
const qu=ref({})
const look =(ContractId:number)=>{
   axios.get('/hread/api/ContractRead/BackfillTshowContract', {
      params: {
        ContractId: ContractId
      }
    }).then(res => {
       qu.value=res.data.data
  
      if(qu.value.ccontractStatus==3||qu.value.ccontractStatus==4){
        router.push({
      path:'/TContractKan',
      query:{ContractId:ContractId}

   })
       }
      else{
 router.push({
      path:'/TContractLook',
      query:{ContractId:ContractId}

   })
      }
  })

 }
</script>
   
<style>
   
</style>